<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米账户-登录</title>
    <link rel="shortcut icon" href="xiaomi2/milogo.png" type="image/x-icon">
    <!-- 阿里巴巴外部引入 -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1798038_h0tg6mafqz8.css"/>
    <style>
        *{margin: 0px;padding: 0px;}
        body{background-color: #fff;}
        /* 头部背景 */
        .login1{width: 1130px;margin: 0 auto;}
        .login1>.login1_one{width: 200px;height: 98px;background: url(xiaomi2/login1.png) no-repeat;}
        /* 背景图片 */
        .login2{position: relative; width: 100%;height: 588px; background: url(xiaomi2/login2.jpg) no-repeat center;}
        .login2>.login2_one{position: absolute;bottom: 0px;right: 140px; width: 410px;height: 556px;background-color: #fff;}
        /* 登录框头部 */
        .login2>.login2_one>.tw1{display: block;text-align: center;/* background-color: blue; */}
        .login2>.login2_one>.tw1>p{display: inline-block; font-size: 24px;color: #666;padding: 27px 0 24px;text-align: center;}
        .login2>.login2_one>.tw1>p:nth-child(1){color: red;}
        .login2>.login2_one>.tw1>span{width: 1px;height: 24px;margin: 0 35px 0 42px;border: 1px solid #e0e0e0;}
        /* 登录框输入框部分 */
        .login2>.login2_one>form>.tw2{margin: 0 auto;width: 348px;}
        .login2>.login2_one>form>.tw2{width: 348px;height: 114px;outline: none;margin-bottom: 14px;}
        .login2>.login2_one>form>.tw2>input{width: 306px;height: 22px;line-height: 22px;padding: 13px 16px 13px 14px; margin-bottom: 14px;outline: none;}
        /* 错误提示 */
        .login2>.login2_one>form>.tw2>.err{color: red;margin-bottom: 5px;line-height: 20px;}
        .login2>.login2_one>form>.tw2>.err>.icon_err{width: 14px;height: 14px;margin: -1px 5px 0 0;overflow: hidden;display: inline-block;vertical-align: middle;background: url(xiaomi2/sprite_login.gif) no-repeat;background-position: 0 -69px;}
        /* 登录按钮 */
        .login2>.login2_one>form>.tw2>.button_sart{width: 348px;height: 60px;}
        .login2>.login2_one>form>.tw2>.button_sart>.login_button{display: block; width: 100%;height: 50px;line-height: 50px;font-size: 14px;background-color: #ff6700;border: 0 none;outline: none; margin-bottom: 14px;color: #fff;cursor: pointer;}
        /* 下部 */
        .login2>.login2_one>form>.tw2>.footer{width: 348px;text-align: center;}
        .login2>.login2_one>form>.tw2>.footer>span{width: 348px;height: 18px;line-height: 18px; font-size: 14px;color: red;}
        .login2>.login2_one>form>.tw2>.footer>p{font-size: 14px;color: #999;margin-top: 30px;}
        .login2>.login2_one>form>.tw2>.footer>.end{width: 348px;height: 60px;/* background-color: royalblue; */margin-top: 80px;}
        .login2>.login2_one>form>.tw2>.footer>.end>.end_one{position: relative; width: 348px;padding-top: 10px;border-top: 1px solid #e0e0e0;}
        .login2>.login2_one>form>.tw2>.footer>.end>.end_one>p{position: absolute;top: -10px;left: 132px; width: 84px; text-align: center;color: #bbb;font-size: 14px;margin: 0 auto;background-color: #fff; z-index: 3;}

        .login2>.login2_one>form>.tw2>.footer>.end>.end_two{float: left; width: 348px;margin-top: 20px;height: 37px;/* background-color: saddlebrown; */text-align: center;}
        .icon_type{position: relative; display: inline-block; background-color: #0288d1;width: 30px;height: 30px;border-radius: 50%;margin: 0 17px;}
        .icon_type>i{ display: inline-block; height: 18px; }
        .icon_default_qq{position: absolute;top: 6px;left: 6px;background: url(xiaomi2/icons_type.png);background-position: -19px 0;background-color: #0288d1;width: 18px;}
        .icon_type1{background-color: #d32f2f;}
        .icon_default_qq1{position: absolute;top: 6px;left: 6px;background: url(xiaomi2/icons_type.png);background-position: -38px 0;width: 18px;}
        .icon_type2{background-color: #0ae;}
        .icon_default_qq2{position: absolute;top: 6px;left: 2.5px;background: url(xiaomi2/icons_type.png);background-position: -56px 0;width: 25px;}
        .icon_type3{background-color: #00d20d;}
        .icon_default_qq3{position: absolute;top: 6px;left: 2.5px;background: url(xiaomi2/icons_type.png);background-position: -82px 0;width: 24px;}
        /* 底部 */
        .end{height: 80px;text-align: center;color: #9d9d9d;margin-top: 70px;}
        .end>ul{list-style: none;margin-bottom: 10px;}
        .end>ul>li{display: inline-block;padding: 0 10px;}
    </style>
</head>
<body>
    <div class="login1">
        <div class="login1_one"></div>
    </div>
    <div class="login2">
        <div class="login2_one">
            <div class="tw1">
                <p>帐号登录</p>
                <span></span>
                <p>扫码登录</p>
            </div>
            <form action="" method="POST">
                <div class="tw2">
                    <!-- 提交表单数据 -->
                    
                        <input class="input1" type="text" name="username" placeholder="邮箱/手机号码/小米ID">
                        <input class="input2" type="password" name="password" placeholder="密码">
                    
                    <!-- 错误提示 -->
                    <div class="err" style="display: none;">
                        <em class="icon_err"></em>
                        <span>${errorMsg}</span>
                    </div>
                    <!-- 登录按钮 -->
                    <div class="button_sart">
                        <input type="button" class="login_button" value="登录">
                    </div>
                    <!-- 下部 -->
                    <div class="footer">
                        <span>手机短信登录/注册</span>
                        <p>
                            <a href="register.html">立即注册</a>
                            <span>|</span>
                            忘记密码？
                        </p>
                        <div class="end">
                            <div class="end_one">
                                <p>其他方式登录</p>
                            </div>
                            <div class="end_two">
                                <a class="icon_type" data-type="qq" href="" title="QQ登录" target="_blank">
                                    <i class="icon_default_qq"></i>
                                </a>
                                <a class="icon_type icon_type1" data-type="qq" href="" title="QQ登录" target="_blank">
                                    <i class="icon_default_qq1"></i>
                                </a>
                                <a class="icon_type icon_type2" data-type="qq" href="" title="QQ登录" target="_blank">
                                    <i class="icon_default_qq2"></i>
                                </a>
                                <a class="icon_type icon_type3" data-type="qq" href="" title="QQ登录" target="_blank">
                                    <i class="icon_default_qq3"></i>
                                </a>
                            </div>
                        </div>
                    </div>
    
                </div>
            </form>
            
        </div>
    </div>
    <div class="end">
        <ul>
            <li>简体</li>|
            <li>繁体</li>|
            <li>English</li>|
            <li>常见问题</li>
        </ul>
        <span>小米公司版权所有-京ICP备10046444-</span>
        <img src="xiaomi2/ghs.png" alt="">
        <span>京公网安备11010802020134号-京ICP证110507号</span>

    </div>
</body>
</html>